<template>
	<div class="sex-chart-box">
		<div id="sexChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";


let colorArr = ["#16CBE5", "#E4D30B"];



let sexChartRef = null;
let initSexChartData = (dataArr) => {
  let sum = 0;
  let legendArr = dataArr.map((item, i) => {
    sum += item.value;
    return {
      name: item.name,
      itemStyle: {
        color: colorArr[i],
      },
    };
  });
  for (let i = 0; i < dataArr.length; i++) {
    let item = dataArr[i];
    // let rate = (item.value / sum) * 100;//占比
    // console.log(rate);
    item.itemStyle = {
      color: {
        x: 0, //右
        y: 0, //下
        x2: 1, //左
        y2: 0, //上
        colorStops: [
          {
            offset: 0,
            color: colorArr[i],
          },
          {
            offset: 1,
            color: "#000000",
          },
        ],
      },
    };
  }

  let options = reactive({
    legend: {
      top: "middle",
      left: "55%",
      data: legendArr,
      icon: "circle",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 10,
      width: "20%",
      formatter: (name) => {
        for (let i = 0; i < dataArr.length; i++) {
          let item = dataArr[i];
          if (item.name === name) {
            return `{a|${name}：${item.value}人}`;
          }
        }
      },
      textStyle: {
        color: "#D3E3FF",
        backgroundColor: "transparent",
        rich: {
          a: {
            width: 60,
            padding: [5, 0, 5, 0],
          },
        },
      },
    },
    series: [
      {
        type: "pie",
        data: dataArr,
        center: ["30%", "50%"],
        radius: ["65%", "80%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        clockwise: false
      },
    ],
  });
	sexChartRef.setOption(options);
};
const initSexChart = (dataArr) => {
	sexChartRef = echarts.init(document.getElementById("sexChart"));
	initSexChartData(dataArr);
};
defineExpose({
	initSexChart,
});
</script>
<style lang="scss" scoped>
.sex-chart-box {
	width: 100%;
	height: 100%;
	#sexChart {
		width: 100%;
		height: 100%;
	}
}
</style>
